<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-menu-item_top{
      position:relative;
      left: 170px;
    }
    b:hover{
      color: orange;
    }
    a{
      text-decoration: none;
    }
    a:link{color: black}
    a:visited{color: black}
    a:hover{color: orange}
    a:active{color: orange}
    .el-menu--horizontal>.el-menu-item {
      border-bottom: none;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
      border-bottom: none;
    }
    .el-icon-arrow-down:before {
      content: none;
    }
  </style>
</head>
<body>
<div id="app">
  <div style="padding: 0">
    <el-menu style="width: 1200px;margin: 0 auto"
             mode="horizontal"
             @select="handleSelect"
             text-color="black"
             active-text-color="black">
      <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px;"></a>
      <el-menu-item index="1" class="el-menu-item_top"><b>首页</b></el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="2" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>在售品种</b></template>
          <el-menu-item index="2-1"><a href="">在售猫咪</a></el-menu-item>
          <el-menu-item index="2-2"><a href="">在售狗狗</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="3" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>宠物词典</b></template>
          <el-menu-item index="3-1"><a href="">猫咪的饲养方式</a></el-menu-item>
          <el-menu-item index="3-2"><a href="">狗狗的饲养方式</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="4" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>服务项目</b></template>
          <el-menu-item index="4-1"><a href="">宠物美容</a></el-menu-item>
          <el-menu-item index="4-2"><a href="">宠物酒店</a></el-menu-item>
          <el-menu-item index="4-3"><a href="">猫咖啡馆</a></el-menu-item>
          <el-menu-item index="4-4"><a href="">狗狗公园</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item index="5" class="el-menu-item_top"><b>联系我们</b></el-menu-item>
      <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
      <div style="float: right;position: relative;top: 10px">
        <el-input type="text">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </el-menu>
  </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {

      }
    },
   methods:{
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
     }
   }
  })
</script>
</html>